iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
Modern Web

購物網站 開始即放棄系列 第 3

DAY 3 HTML 常用標籤介紹

  • 分享至 

  • xImage
  •  
  • 網頁標題  <H1> - <H6>  在搜尋引擎優化(SEO)時候搜尋引擎會透過網站標題了解網站的內容,<H1>是層級最大即代表最重要的,<H6>是層級最小的,所以建議一篇文章的由標題的重要性 <H1> - <H6> 按順序使用,通常<H1>在文章中只會有一個,整個網站的標題。
  • <p>表示文字段落,p 是因為取 paragraph 這單字字首而成,使用方法如下:
<p>購物網站 開始即放棄 系列文章今天來到第三天</p>
  • 圖片<img>是取英文字image 的意思,裡面常用屬性是 src(source file、來源檔案) 表示圖片來源檔案位置,alt(alternative text、替代文字) 是當圖片無法顯示的時候顯示的預設文字,使用方法如下:
<img src="圖片位置" alt="圖片說明" >
  • 超連結<a>是anchor(錨)的意思,裡面屬性有href(hypertext reference)是設定超連結開啟的網址,另一個屬性 target 是指在哪開啟連結,使用方法如下:
<a href="連結網址" target="_blank">超連結文字</a>
  • HTML註解  <!-- 註解區域 --> ,瀏覽器將不會把這些文字顯示在網頁上,但是仍然可以透過檢視原始碼看到

  • 清單,有分有順序跟無順序兩種,有順序的<ol>無順序的是<ul>,兩者的差別在一個在清單前面是圓圈,另一個是數字,標籤裡面每個項目皆會用<li></li>包起來,使用方法如下:

<!-- 有序清單 -->
<ol> 
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
    <li>項目四</li>
</ol> 
<!-- 無序清單 -->
<ul> 
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
    <li>項目四</li>
</ul> 
  • 分行<br>使取用(break)前兩個字,他可以讓兩段文字分行,使用方法如下:
文字說明第一行 <br> 文字說明第二行

上面介紹了一些常用的HTML標籤, Day 3 就先到這了。


上一篇
DAY 2 HTML 介紹
下一篇
Day 4 HTML 表單收集
系列文
購物網站 開始即放棄13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言